<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <template #title>
        <van-button to="/search" class="search-btn" icon="search" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 滑动导航栏 -->
    <van-tabs class="header-tabs" v-model="active" animated swipeable>
      <van-tab v-for="item in channels" :key="item.id"
        :title="item.name"
      >
        <ArticleList :channelId="item.id"/>
      </van-tab>
      <template #nav-right>
        <div class="right-btn" @click="isShowEditPopup=true">
          <i class="toutiao toutiao-gengduo"></i>
        </div>
        <div class="placeholder-btn"></div>
      </template>
    </van-tabs>
    <van-popup v-model="isShowEditPopup"
      position="bottom"
      :style="{ height: '90%' }"
      closeable
      close-icon-position="top-left"
    >
      <ChannelEdit @update-active="onUpdateActive"
        :myChannels="channels"
        :activeIndex="active"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from './components/ArticleList.vue'
import { Toast } from 'vant'
import ChannelEdit from './components/ChannelEdit.vue'
import { getItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      active: 0,
      channels: [],
      isShowEditPopup: false
    }
  },

  created () {
    this.loadUserChannels()
  },

  methods: {
    // 加载用户频道
    async loadUserChannels () {
      try {
        const localChannel = getItem('HMTT')
        // 判断 用户未登录 用本地数据 并且 本地有数据
        if (!this.$store.state.user && localChannel) {
          this.channels = localChannel
        } else {
          // 用户登录 并且 本地没有数据 发请求
          const res = await getUserChannels()
          this.channels = res.channels
        }
      } catch (err) {
        Toast('系统异常')
      }
    },
    // 子向父传值 我的推荐 删除/跳转
    onUpdateActive (val, isShow) {
      this.active = val
      this.isShowEditPopup = isShow
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  }
}
</script>

<style scoped lang="less">
.home-container{
  padding-top: 172px;
  /deep/.van-nav-bar__title{
    max-width: unset;
    .search-btn{
      width: 555px;
      height: 64px;
      background: rgba(255, 255, 255, .2);
      border-radius: 32px;
      border: none;
      .van-icon-search{
        color: #fff;
      }
    }
  }
  /deep/.header-tabs{
    .van-tabs__wrap{
      width: 100%;
      height: 80px;
      border-bottom: 1px solid #EDEFF3;
      position: fixed;
      top: 92px;
      z-index: 2;
      .van-tabs__nav{
        padding: 0;
        // 默认样式
        .van-tab{
          width: 200px;
          border-right: 1px solid #EDEFF3;
          .van-tab__text{
            font-size: 28px;
            color: #777;
          }
        }
        // 选中样式
        .van-tab--active{
          .van-tab__text{
            font-size: 30px;
            color: #333;
          }
        }
        // 底下蓝条
        .van-tabs__line{
          width: 31px;
          height: 6px;
          background: #3296FA;
          border-radius: 3px;
          bottom: 8px;
        }
        // 右侧 更多的横条
        .right-btn{
          position: fixed;
          right: 0;
          width: 66px;
          height: 80px;
          background:rgba(255, 255, 255, .9);
          display: flex;
          justify-content: center;
          align-items: center;
          .toutiao{
            font-size: 33px;
          }
          &::before{
            content: '';
            position: absolute;
            left: 0;
            width: 2px;
            height: 58px;
            background-image: url(~@/assets/gradient-gray-line.png);
            background-size: contain;
          }
        }
        // 右侧暂位样式
        .placeholder-btn{
          width: 63px;
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
